﻿@using BookShop.Library.Constant
@{
    ViewBag.Title = "Thêm Sách";
}

<div class="portlet box blue">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-edit"></i>@ViewBag.Title
        </div>
    </div>
    <div class="portlet-body form">
        <form class="form-horizontal" id="formAddBook" method="POST" enctype="multipart/form-data" action="@Url.Action("Add")">
            <div class="form-body">
                <div class="alert alert-danger display-hide" style="display: none;">
                    <button class="close" data-close="alert"></button>
                    @AlertMessage.InvalidInput
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3 left">Tiêu đề <span class="required">*</span></label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="title" id="title" value="@ViewBag.AddTitle"/>
                                <span class="help-block" for="title"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3 left">Thể loại <span class="required">*</span></label>
                            <div class="col-md-8">
                                <select class="form-control input-large bs-select" id="categoryId" name="categoryId" data-live-search="true"></select>
                                <span class="help-block" for="categoryId"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3 left">Tác giả <span class="required">*</span></label>
                            <div class="col-md-8">
                                <select class="form-control input-large bs-select" id="authorId" name="authorId" data-live-search="true"></select>
                                <span class="help-block" for="authorId"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3 left">Nhà xuất bản <span class="required">*</span></label>
                            <div class="col-md-8">
                                <select class="form-control input-large bs-select" id="publisherId" name="publisherId" data-live-search="true"></select>
                                <span class="help-block" for="publisherId"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3 left">Giá (VNĐ) <span class="required">*</span></label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="price" id="price" value="@ViewBag.AddPrice"/>
                                <span class="help-block" for="price"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3 left">Số trang</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="pageNumber" id="pageNumber" value="@ViewBag.AddPageNumber"/>
                                <span class="help-block" for="pageNumber"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3 left">Số lượng</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="quantity" id="quantity" value="@ViewBag.AddQuantity"/>
                                <span class="help-block" for="quantity"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3 left">Kích thước</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="size" id="size" value="@ViewBag.AddSize"/>
                                <span class="help-block" for="size"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3 left">Ngày xuất bản</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control form-control-inline date-picker" name="publishDate" id="publishDate" size="16" value="@ViewBag.AddPublishDate" data-date-format="dd/mm/yyyy"/>
                                <span class="help-block" for="birthdate"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3 left">File ảnh <span class="required">*</span></label>
                            <div class="col-md-4">
                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                    <div class="input-group">
                                        <div class="form-control uneditable-input span3" data-trigger="fileinput">
                                            <span class="fileinput-filename"></span>
                                        </div>
                                        <span class="input-group-addon btn default btn-file">
                                            <span class="fileinput-new">Select file </span>
                                            <span class="fileinput-exists">Change </span>
                                            <input type="file" name="picture" id="picture">
                                        </span>
                                        <a href="#" class="input-group-addon btn red fileinput-exists" data-dismiss="fileinput">Remove </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-2 left">Mô tả</label>
                        <div class="col-md-8">
                            <textarea class="form-control" id="description" name="description" rows="10">@ViewBag.AddDescription</textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-actions right">
                <button class="btn blue" type="submit">Thêm</button>
                <a href="@Url.Action("List")" class="btn default">Quay lại</a>
            </div>
        </form>
    </div>
</div>

@section css
{
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/assets/global/plugins/bootstrap-datepicker/css/datepicker3.css")"/>
    <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/assets/global/plugins/bootstrap-toastr/toastr.min.css")"/>
    <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css")" />
    <link href="@Url.Content("~/Content/assets/global/plugins/bootstrap-select/bootstrap-select.min.css")" rel="stylesheet" type="text/css"/>
}

@section javascript
{
    <script src="@Url.Content("~/Content/assets/global/plugins/bootstrap-select/bootstrap-select.min.js")" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/bootstrap-toastr/toastr.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/jquery-validation/js/jquery.validate.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js")"></script>
    @if (TempData[AlertMessage.TempDataKey] != null)
    {
        <script type="text/javascript">
            toastr['error']('@TempData[AlertMessage.TempDataKey].ToString()', 'Error');
            toastr.option = {
                "closeButton": true,
                "debug": false,
                "positionClass": "toast-top-right",
                "onclick": null,
                "showDuration": "1000",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }
        </script>
    }
    <script type="text/javascript">
        $(document).ready(function () {
            $('.bs-select').selectpicker({
            });
            getCategories();
            getAuthors();
            getPublishers();
            $('.date-picker').datepicker({
                rtl: Metronic.isRTL(),
                autoclose: true
            });
            validateAdd();
        });
        function getCategories() {
            $("#categoryId").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetAllCategory")',
                data: {},
                success: function (categories) {
                    $.each(categories, function (i, category) {
                        $("#categoryId").append('<option value="' + category.Id + '">' + category.Name + '</option>');
                    });
                    $('#categoryId').selectpicker('refresh');
                    $('#categoryId').selectpicker('val', '@ViewBag.AddCategoryId');
                },
                error: function () {
                }
            });
            return false;
        }
        function getAuthors() {
            $("#authorId").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetAllAuthor")',
                data: {},
                success: function (authors) {
                    $.each(authors, function (i, author) {
                        $("#authorId").append('<option value="' + author.Id + '">' + author.Name + '</option>');
                    });
                    $('#authorId').selectpicker('refresh');
                    $('#authorId').selectpicker('val', '@ViewBag.AddAuthorId');
                },
                error: function () {
                }
            });
            return false;
        }
        function getPublishers() {
            $("#publisherId").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetAllPublisher")',
                data: {},
                success: function (publishers) {
                    $.each(publishers, function (i, publisher) {
                        $("#publisherId").append('<option value="' + publisher.Id + '">' + publisher.Name + '</option>');
                    });
                    $('#publisherId').selectpicker('refresh');
                    $('#publisherId').selectpicker('val', '@ViewBag.AddPublisherId');
                },
                error: function () {
                }
            });
            return false;
        }
        function validateAdd() {
            var form1 = $('#formAddBook');
            var error = $('.alert-danger', form1);
            form1.validate({
                errorElement: 'span',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    title: {
                        required: true
                    },
                    categoryId: {
                        required: true
                    },
                    authorId: {
                        required: true
                    },
                    publisherId: {
                        required: true
                    },
                    price: {
                        required: true,
                        digits: true
                    },
                    pageNumber: {
                        digits: true
                    },
                    size: {
                        maxlength: 50
                    },
                    quantity: {
                        required: true,
                        digits: true
                    }
                },
                invalidHandler: function () {
                    error.show();
                },
                highlight: function (element) {
                    $(element)
                        .closest('.form-group').addClass('has-error');
                },

                unhighlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-error');
                },

                success: function (label) {
                    label
                        .closest('.form-group').removeClass('has-error');
                },
                submitHandler: function (form) {
                    error.hide();
                    form.submit();
                }
            });
        }
    </script>
}